<template>
    <div class="headers">
        <input placeholder="请输入任务名称" v-model="taskName" @keydown.enter="taskEnter(taskName)" />
    </div>
</template>

<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
    name: 'navHeader',
    props: {
        tasks: {
            type: Array,
            required: true
        }
    },
    emit: ['addTask'],
    setup(props, context) {
        let taskName = ref(null);
        let taskEnter = (val) => {
            let flag = true;
            props.tasks.map(item => {
                if (item.name === val) {
                    alert('任务已存在');
                    flag = false;
                }
            })
            if (flag) {
                context.emit('addTask', val);
                taskName.value = '';
            }
        };
        return {
            taskName,
            taskEnter
        }
    }
})
</script>

<style scoped lang="scss">
.headers {
    height: 30px;
    margin: 0px;
    padding: 0px;
    width: 200px;
    & input {
        width: 100%;
    }
}
</style>